<template>
  <div class="single-player-rank">
    <div class="player-rank-title">
      <div class="my-tab-pane">
        <el-tabs v-model="activeName">
          <el-tab-pane label="进攻" name="attack"/>
          <el-tab-pane label="组织" name="organize"/>
          <el-tab-pane label="对抗" name="battle"/>
          <el-tab-pane label="防守" name="defense"/>
        </el-tabs>
      </div>
    </div>
    <GoalRank :teamId="teamId" :season="season" v-show="activeName==='attack'"/>
    <PassRank :teamId="teamId" :season="season"  v-show="activeName==='organize'"/>
    <BattleRank :teamId="teamId" :season="season"  v-show="activeName==='battle'"/>
    <DefenseRank :teamId="teamId" :season="season" v-show="activeName==='defense'"/>
  </div>
</template>

<script>
  import GoalRank from "./goalRank/GoalRank";
  import PassRank from "./passRank/PassRank";
  import BattleRank from "./battleRank/BattleRank";
  import DefenseRank from "./defenseRank/DefenseRank";
  export default {
    name: "MetricsRank",
    components:{
      GoalRank,
      PassRank,
      BattleRank,
      DefenseRank,
    },
    props:{
      teamId:{
        type:Number
      },
      season:{
        type:String,
        default(){
          return '2019赛季'
        }
      }
    },
    data(){
      return {
        activeName:'attack'
      }
    }
  }
</script>

<style scoped>
  .single-player-rank {
    width:  1440px;
    height: 677px;
    margin: 30px auto 0;
    background-color: #f1f6f9;
  }
  .player-rank-title {
    width: 100%;
    height: 50px;
    background-color: #194568;
  }
  .my-tab-pane {
    margin-right: 20px;
    float: right;
  }
  .player-rank-title /deep/ .el-tabs__item {
    color: white;
    font-size: 25px;
    font-weight: bold;
  }
  .player-rank-title /deep/ .el-tabs__nav-wrap::after {
    height: 0;
  }
  .player-rank-title /deep/ .el-tabs__active-bar {
    height: 3px;
    background-color: #16C79A;
  }
  .player-rank-title /deep/ .el-tabs__item:hover {
    color: #16C79A;
  }
  .player-rank-title /deep/ .el-tabs__item.is-active {
    color: #16C79A;
  }
</style>